<template>
  <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-divider orientation="left"> 显示列 </a-divider>
    <a-form-model-item label="字段配置">
      <div class="workSheetChangeColumn flexColumn advance" ref="container">
        <div class="searchBar flexRow">
          <input
            placeholder="查找字段"
            class="ming Input flex"
            type="text"
            v-model="key"
          />
          <div class="quickOperate">
            <a-space>
              <a-button size="small" @click="showAll">全显示</a-button>
              <a-button size="small" @click="hiddenAll">全隐藏</a-button>
            </a-space>
          </div>
        </div>
        <div style="max-height: 630px; overflow: auto">
          <div class="columnCheckList">
            <div>
              显示 ({{ columns.filter((f) => f.check == true).length }})
            </div>
            <div class="drag-div">
              <div
                class="showControlsColumnCheckItem flex align-center drag-btn justify-start option-change-box-row"
                v-for="item in columns.filter((f) => f.check == true)"
                :key="item.key"
              >
                <a-switch size="small" v-model="item.check" />
                <eip-zerocode-field
                  :cicon="item.cicon"
                  :icon="item.icon"
                  :label="item.label"
                ></eip-zerocode-field>
              </div>
            </div>

            <div>
              <div>
                隐藏 ({{ columns.filter((f) => f.check == false).length }})
              </div>
            </div>

            <div
              class="showControlsColumnCheckItem flex align-center justify-start option-change-box-row"
              v-for="item in columns.filter((f) => f.check == false)"
              :key="item.key"
            >
              <a-switch size="small" v-model="item.check" />
              <eip-zerocode-field
                :cicon="item.cicon"
                :icon="item.icon"
                :label="item.label"
              ></eip-zerocode-field>
            </div>
          </div>
        </div>
      </div>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
import Sortable from "sortablejs";
export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      blockSyle: {
        display: "block",
        height: "30px",
        lineHeight: "30px",
      },
      key: "",
    };
  },
  props: {
    option: {
      type: Object,
    },
    field: {
      type: Array,
    },
  },
  computed: {
    columns() {
      var arr = [];
      this.option.data.forEach((item) => arr.push(item));
      if (this.key) {
        arr = arr.filter((item) => item.label.includes(this.key));
      }
      return arr;
    },
  },
  created() {
    this.init();
    this.rowDrop();
  },
  methods: {
    /**
     *
     */
    init() {
      let that = this;
      if (that.option.data.filter((w) => w.check == true).length > 0) {
        that.field.forEach((item) => {
          var data = that.$utils.find(
            that.option.data,
            (f) => f.key == item.key
          );
          if (data == null) {
            that.option.data.push({
              icon: item.icon,
              cicon: item.cicon,
              key: item.key,
              width: 200,
              type: item.type,
              label: item.label,
              check: false,
            });
          } else {
            data.label = item.label;
          }
        });
        var delIndex = [];
        that.option.data.forEach((item, index) => {
          var data = that.$utils.find(that.field, (f) => f.key == item.key);
          if (data == null) {
            delIndex.push(index);
          }
        });
        for (let i = delIndex.length - 1; i >= 0; i--) {
          that.option.data.splice(delIndex[i], 1);
        }
      } else {
        that.field.forEach((item) => {
          var data = that.$utils.find(
            that.option.data,
            (f) => f.key == item.key
          );
          if (data == null) {
            that.option.data.push({
              icon: item.icon,
              cicon: item.cicon,
              key: item.key,
              width: 200,
              type: item.type,
              label: item.label,
              check: false,
            });
          }
        });

        var check = [];
        that.option.data.forEach((item) => {
          var data = that.$utils.find(that.field, (f) => f.key == item.key);
          if (data != null) {
            check.push(item);
          }
        });

        that.option.data = check;
      }
    },

    /**
     * 拖拽
     */
    rowDrop() {
      let that = this;
      this.$nextTick(() => {
        setTimeout(function () {
          const container = that.$refs.container;
          if (container) {
            Sortable.create(container.querySelector(".drag-div"), {
              handle: ".drag-btn",
              onEnd: ({ newIndex, oldIndex }) => {
                var checks = that.option.data.filter((f) => f.check == true);
                const currRow = checks[oldIndex];
                checks.splice(oldIndex, 1);
                checks.splice(newIndex, 0, currRow);

                var noCheck = that.option.data.filter((f) => f.check == false);
                noCheck.forEach((item) => {
                  checks.push(item);
                });
                that.option.data = checks;
              },
            });
          }
        }, 100);
      });
    },

    /**
     * 显示所有
     */
    showAll() {
      this.option.data.forEach((item) => {
        item.check = true;
      });
    },

    /**
     * 隐藏所有
     */
    hiddenAll() {
      this.option.data.forEach((item) => {
        item.check = false;
      });
    },
  },
};
</script>
<style scoped>
.sortColumnWrap.layout2 .workSheetChangeColumn {
  padding: 0 !important;
}

.workSheetChangeColumn.advance {
  padding: 0 6px;
}
.flexColumn {
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.workSheetChangeColumn .searchBar {
  border-bottom: 1px solid #eaeaea;
  height: 38px;
}

.flexRow {
  display: flex;
  min-width: 0;
}
.workSheetChangeColumn .searchBar .Input {
  border: none;
  padding-left: 6px;
  outline: none;
}
.ming.Input {
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
  font-size: 14px;
  height: 36px;
  padding: 0 12px;
}
.workSheetChangeColumn .columnCheckList .dragCon {
  cursor: grab;
}

.showControlsColumnCheckItem .dragCon {
  align-items: center;
  display: flex;
}
.showControlsColumnCheckItem. {
  background-color: #f2f9ff;
}

.showControlsColumnCheckItem {
  background: #fff;
  border-radius: 3px;
  height: 32px;
  line-height: 32px;
  padding-right: 10px;
  z-index: 13;
}
.flexRow {
  display: flex;
  min-width: 0;
}

.showControlsColumnCheckItem.active,
.showControlsColumnCheckItem:hover {
  background-color: #f5f5f5;
}
</style>
